<template>
	<view>
		<view @click="showCalendar()" style="margin: 20rpx auto; width: 670rpx; background-color: #fff; border: 2rpx solid #999;height: 64rpx;display: flex;align-items: center;justify-content: center;flex-direction: row;border-radius: 100rpx;margin-top: 40rpx;">
			<u-icon slot="icon" size="32" name="calendar" color="#999"></u-icon>
			<text style="color: #999;margin-left: 10rpx;">{{toolTip}}</text>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view v-for="(item,index) in list" :key="index" style="padding: 30rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding-right: 40rpx;">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view class="icon">
						<u-image  width="80rpx" height="80rpx" src="https://img.koalalf.com/icon/finance.png"></u-image>
					</view>
					<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
						<text>{{item.remark}}</text>
						<text style="font-size: 24rpx;color: #999;margin-top: 8rpx;">{{item.create_time}}</text>
					</view>
				</view>
				<text style="font-size: 32rpx;">{{item.amount}}元</text>
			</view>
			
		</mescroll-body>
		
		<u-calendar v-model="showCalendarStatus" mode="range" @change="change" ></u-calendar>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				pagination: {
					page: 1,
					pageSize: 0,
					total: 0,
				},
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				showCalendarStatus: false,
				startDate:'',
				endDate: '',
				toolTip: "选择日期",
				source: ''
			}
		},
		onLoad({source}) {
			this.source = source
		},
		methods: {
			getData(){
				let that = this;
				this.$u.api.financeList({page:that.pagination.page, pageSize:20, start_date: that.startDate, end_date: that.endDate, source: that.source}).then(res => {
					that.mescroll.endByPage(res.data.length, res.pagination.total)
					
					if (that.pagination.page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					
					that.pagination = res.pagination;
					that.pagination.page ++
				})
			},
			upCallback() {
				this.getData()
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			showCalendar(){
				this.showCalendarStatus = true
			},
			change(e){
				this.pagination.page = 1;
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getData(1)
				this.toolTip = "从"+ e.startDate + "到" + e.endDate
			}
		}
	}
</script>

<style>
	body {
		background-color: #fff;
	}
	
	.icon{
		width: 80rpx;height: 80rpx; border-radius: 40rpx;overflow: hidden;
	}

</style>
